<?php
require_once('../config.php');
session_start();
if(empty($_SESSION['facebookID']))
	die("Not logged into facebook.");
$facebookID = 5536417937;//$_SESSION['facebookID'];

?>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.14.custom.css" />
		<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-jvert-tabs-1.1.4.css" />
		<link rel="stylesheet" type="text/css" href="css/cardGrid.css" />
		<script type="text/javascript" src=<?= LIB_JQUERY; ?>></script>
		<script type="text/javascript" src=<?= LIB_QUICKSAND; ?>></script>
		<script type="text/javascript" src=<?= LIB_EASING; ?>></script>
		<script type="text/javascript" src="js/jquery-ui.min.js"></script>
		<script type="text/javascript" src="js/jquery-jvert-tabs-1.1.4.js"></script>
		<script type="text/javascript" src="js/jquery.slidingGallery-1.2.min.js"></script>
		<script>
			function updateCardClickBinding() {
				$('.card').click(function() {
					var cardImageBack = $(this).find('.card_image img').attr('src');
					var cardImageFront = cardImageBack
						.replace(' 3_b',  ' 1_f')
						.replace(' 7_b',  ' 5_f')
						.replace(' 11_b', ' 9_f')
						.replace(' 2_b',  '_f')
						.replace(' 4_b',  ' 3_f')
						.replace('_b',    '_f');
						
					var dialog = $(''.concat(
						'<table>',
							'<tr>',
								'<td>',
									'<img src="', cardImageFront, '" />',
								'</td>',
								'<td>',
									'<img src="', cardImageBack, '" />',
								'</td>',
							'</tr>',
						'</table>'
					));
					
					$.get(cardImageFront, function() {
						dialog.dialog({
							modal     : true,
							resizable : false,
							draggable : false,
							width     : 720,
						});
					});
				});
			}
			
			function filterCards(user_id, type) {
				$.post(
					'../ajax/getCards.php',
					{
						fb_id       : user_id,
						type_filter : type
					},
					function(data) {
						$('.cards').quicksand(
							$(data).children('.card'),
							{
								duration  : 700,
								attribute : 'id',
								easing    : 'easeInOutQuad'
							},
							updateCardClickBinding
						);
					}
				);
			}

			$(document).ready(function() {
				//initialize main tabs
				$("#tabs").tabs();
				//initialize vertical tabs for collections tab
				$("#vtabs").jVertTabs({
					equalHeights : true,
					select       : function(index) {
						$('[id="#vtabs-collection-'+index+'"]').append($('.cards'));
						index = ((index==4)?10:((index==5)?20:index));
						filterCards(<?=$facebookID;?>, index);
					}
				});
				filterCards(<?=$facebookID;?>, 0);
			});
		</script>
	</head>
	<body>
		<div id="fb-root"></div>
		<script>
			// asynchronously loads Facebook Javascript SDK, then displays card/friends list.
			window.fbAsyncInit = function() {
				FB.init({
					appId  : <?=APP_ID?>,
					status : true, // check login status
					cookie : true, // enable cookies to allow the server to access the session
					xfbml  : true  // parse XFBML
				});
			};
			
			(function() {
				var e = document.createElement('script');
				e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
				e.async = true;
				document.getElementById('fb-root').appendChild(e);
			}());
		</script>
		<a href="testList.php">Back to list</a><br /><br />
		<div id="tabs" style="min-width:700px;">
			<ul>
				<li><a href="#collection"><span>My Collection</span></a></li>
				<li><a href="#trades"><span>Open Trades</span></a></li>
				<li><a href="#browse"><span>Browse</span></a></li>
			</ul>
			<div id="collection">
				<div id="vtabs">
					<div>
						<ul>
							<li><a href="#vtabs-collection-0">All Types</a></li>
							<li><a href="#vtabs-collection-1">Race</a></li>
							<li><a href="#vtabs-collection-2">Aspect</a></li>
							<li><a href="#vtabs-collection-3">Power</a></li>
							<li><a href="#vtabs-collection-4">Minion</a></li>
							<li><a href="#vtabs-collection-5">Bane</a></li>
						</ul>
					</div>
					<div>
						<div id="#vtabs-collection-0">
							<ul class="cards"></ul>
						</div>
						<div id="#vtabs-collection-1"></div>
						<div id="#vtabs-collection-2"></div>
						<div id="#vtabs-collection-3"></div>
						<div id="#vtabs-collection-4"></div>
						<div id="#vtabs-collection-5"></div>
					</div>
				</div>
			</div>
			<div id="trades">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</div>
			<div id="browse">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</div>
		</div>
		<div id="dialog-login" title="Login">
			<p class="validateTips">Please log in with your Untold account.</p>
			<form>
				<fieldset>
					<label for="username">Username</label>
					<input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all" />
					<label for="password">Password</label>
					<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
				</fieldset>
			</form>
		</div>
	</body>
</html>